<template>
	<el-container>
		<el-main>
			<el-tabs type="border-card" tab-position="top">
				<el-tab-pane label="告警配置">
					<el-card header="周边检测告警" shadow="never">
						<el-form label-position="left" label-width="130px">
							<!-- <el-form-item label="越线检测告警" prop="name" v-for="(items,idx) in FormData.slice()" :key="idx">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="items.over_line_alarm_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="items.over_line_alarm_sound" @change="changeSound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="items.over_line_alarm_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item> -->
							<el-form-item label="越线检测告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.over_line_alarm_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.over_line_alarm_sound" @change="changeSound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.over_line_alarm_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
							<el-form-item label="入侵检测告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.region_invasion_alarm_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.region_invasion_alarm_sound" @change="changeSound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.region_invasion_alarm_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
							<el-form-item label="区域进入告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.region_in_alarm_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.region_in_alarm_sound" @change="changeSound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.region_in_alarm_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
							<el-form-item label="区域离开告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.region_out_alarm_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.region_out_alarm_sound" @change="changeSound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.region_out_alarm_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
							<el-form-item label="遗留检测告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.occlusion_alarm_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.occlusion_alarm_sound" @change="changeSound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.occlusion_alarm_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
							<el-form-item label="快速移动告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.fast_move_alarm_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.fast_move_alarm_sound" @change="changeSound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.fast_move_alarm_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
							<el-form-item label="徘徊检测告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.linger_alarm_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.linger_alarm_sound" @change="changeSound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.linger_alarm_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
						</el-form>
					</el-card>
					<el-card header="智能告警" shadow="never" class="u-m-t-20">
						<div></div>
						<el-form label-position="left" label-width="130px">
							<el-form-item label="移动侦测告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.motion_detection_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.motion_detection_sound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.motion_detection_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
							<el-form-item label="人形移动侦测告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.human_detection_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.human_detection_sound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.human_detection_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
							<el-form-item label="物品遗留告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.abandon_alarm_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.abandon_alarm_sound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.abandon_alarm_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
							<el-form-item label="物品移走告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.removed_alarm_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.removed_alarm_sound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.removed_alarmm_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
						</el-form>
					</el-card>
					<el-card header="未知告警" shadow="never" class="u-m-t-20">
						<div></div>
						<el-form label-position="left" label-width="130px">
							<el-form-item label="其他告警" prop="name">
								<span class="u-m-r-10">弹窗提示</span>
								<el-switch v-model="FormData.unknown_pop"></el-switch>
								<span class="u-m-l-20 u-m-r-10">播放声音</span>
								<el-select v-model="FormData.unknown_sound">
									<el-option v-for="(item,index) in soundList" :key="index" :label="item.label"
										:value="item.value"></el-option>
								</el-select>
								<span class="u-m-l-20 u-m-r-10">电话通知</span>
								<el-input v-model="FormData.unknown_tel" placeholder="请输入手机号码"
									style="width: 200px;"></el-input>
							</el-form-item>
						</el-form>
					</el-card>
				</el-tab-pane>
			</el-tabs>
		</el-main>
		<el-footer class="u-text-center">
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</el-footer>
	</el-container>
	<audio ref="audio" v-if="music" class="aud" @pause="onPause" @play="onPlay" @timeupdate="onTimeupdate"
		@loadedmetadata="onLoadedmetadata">
		<source :src="music" />
	</audio>

</template>

<script>
	export default {
		name: 'config',
		components: {

		},
		data() {
			return {
				isSaveing:false,
				music:'',
				soundList: this.$COMMON.soundList,
				FormData: {}
			}
		},
		created() {
			this.getConfig()
		},
		methods: {
			// 音效选择
			changeSound(e){

				this.music = ''
				this.soundList.forEach(item=>{
					if(item.value === e){
						this.music = item.url
					}
				})
				this.$nextTick(()=>{
					//this.onPause()
					this.onPlay()
					setTimeout(()=>{
						this.onPause()
					},1000)
				})
			},
			onTimeupdate(player) {
				const currentTime = Number.parseInt(player.target.currentTime)
				// 播放前 1 秒
				if (currentTime === 1) {
					player.target.currentTime = 0
					// player.currentTime(0)
					this.onPause()
				}
			},
			// 播放音频
			onPlay() {
				this.audioOpen = true
				this.$refs.audio.play();
			},
			// 暂停播放
			onPause() {
				this.audioOpen = false
				this.$refs.audio.pause();
			},
			async getConfig() {
				const res = await this.$API.system.config.cfg.get()
				let form = res.data

				// 将对象属性值转换为布尔类型
				const parsedForm = JSON.parse(JSON.stringify(form), (key, value) => {
				  if (value === 'true') {
				    return true;
				  } else if (value === 'false') {
				    return false;
				  }
				  return value;
				});
				this.FormData = parsedForm
			},

			async submit(){
				this.isSaveing = true

				// 将对象属性值转换为字符串
				const stringifiedForm = JSON.stringify(this.FormData, (key, value) => {
				  if (typeof value === 'boolean') {
				    return value.toString();
				  }
				  return value;
				});

				// 将字符串转换回对象
				const parsedForm = JSON.parse(stringifiedForm);
				let data = parsedForm
				const res = await this.$API.system.config.config.post(data)
				if(res){
					this.isSaveing = false
					this.$message.success("操作成功")
				}

			},
			convertJsonToArray(json) {
			  return Object.entries(json).map(([name, value]) => ({ name, value: String(value) }));
			}
		}
	}
</script>

<style>
</style>
